<template>
  <div class="staProject">
    <div class="showAll" v-if="!showDetail">
      <div class="toolBar">
        <el-select v-model="projectId" filterable clearable
          size="small"
          style="width: 30%"
          @change="getstaByTask">
            <el-option
              v-for="(item, index) in projectList"
              :key="index"
              :label="item.projectName"
              :value="item.id"
            ></el-option>
          </el-select>
        <el-date-picker
            v-model="startDate"
            value-format="yyyy-MM-dd"
            type="date"
            size="small"
            placeholder="起始日期"
            style="width: 150px;margin-left:5px;"
          >
          </el-date-picker>
          <el-date-picker
            v-model="endDate"
            value-format="yyyy-MM-dd"
            type="date"
            size="small"
            placeholder="截至日期"
            style="width: 150px; margin:0 5px"
          >
        </el-date-picker>
        <el-input
          v-model="searchWord"
          size="small"
          @clear="getstaByTask"
          style="width: 225px"
          type="text"
          placeholder="任务名称"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
          <el-button
            @click="getstaByTask"
            slot="append"
            icon="el-icon-search"
          ></el-button>
        </el-input>
        <!-- <el-button
          @click="downloadDocument"
          style="margin-left: 10px"
          size="small"
          type="success"
          ><i class="el-icon-download"></i> 批量导出</el-button 
        >-->
      </div>
      <div class="content">
        <el-table
          border
          stripe
          size="small"
          :highlight-current-row="true"
          :data="tableData"
          style="width: 100%"
          @selection-change="selectDownload"
        >
          <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
          <el-table-column
            prop="taskName"
            label="任务名称"
          ></el-table-column>
          <el-table-column prop="taskDescribe" label="任务描述"></el-table-column>
          <el-table-column prop="createUsername" label="创建人"></el-table-column>
          <el-table-column prop="createTime" show-overflow-tooltip label="创建时间"></el-table-column>
          <el-table-column prop="taskStartTime" label="开始时间"></el-table-column>
          <el-table-column prop="taskEndTime" label="结束时间"></el-table-column>
          <el-table-column prop="workTime" label="工时"></el-table-column>
          <el-table-column
            align="center"
            label="操作"
            :width="90"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                @click="showSta(scope.row.id)"
                size="mini"
                type="primary"
              >
                <i class="el-icon-info"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="showDetail" v-if="showDetail">
      <div class="toolBar">
        <el-button @click="showDetail = false" size="small" type="info"
          ><i class="el-icon-arrow-left"></i> 返 回</el-button
        >
      </div>
      <div class="content">
        <el-table
          border
          stripe
          size="small"
          :highlight-current-row="true"
          :data="messageData"
          style="width: 100%"
        >
          <el-table-column
            prop="username"
            label="姓名"
            :key="Math.random()"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            show-overflow-tooltip
            :key="Math.random()"
          ></el-table-column>
          <el-table-column
            prop="workStartTime"
            label="开始时间"
            :key="Math.random()"
          ></el-table-column>
          <el-table-column
            prop="workEndTime"
            label="结束时间"
            :key="Math.random()"
          ></el-table-column>
          <el-table-column
            prop="workTime"
            label="工时"
            :key="Math.random()"
          ></el-table-column>
          <el-table-column
            prop="startLevel"
            label="评分"
            :key="Math.random()"
          ></el-table-column>
          <el-table-column
            prop="evaluate"
            label="评价"
            :key="Math.random()"
          ></el-table-column>
          <el-table-column
            prop="workDescribe"
            label="任务描述"
            :key="Math.random()"
          ></el-table-column>
        </el-table>
      </div>
    </div>
    <!-- <el-dialog title="人员信息" :visible.sync="showDetail">
      <el-table size="small" :data="tempData">
        <el-table-column prop="username" label="姓名"></el-table-column>
        <el-table-column prop="workTime" label="工时"></el-table-column>
      </el-table>
    </el-dialog> -->
  </div>
</template>
<script>
import * as api from "@/js/workTimeApi";
export const downloadExcel = (url) => {
  const iframe = document.createElement("iframe");
  iframe.style.display = "none";
  iframe.style.height = 0;
  iframe.src = url;
  document.body.appendChild(iframe);
  setTimeout(() => {
    iframe.remove();
  }, 60 * 1000);
};
export default {
  name: "StaProject",
  data() {
    return {
      url: window._apiUrl.webUrl,
      tableData: [],
      tempData: [],
      downloadList: [],
      showDetail: false,
      searchWord: '',
      startDate: '',
      endDate: '',
      projectId: null,
      projectList: [],
      messageData: [],
    };
  },
  methods: {
    //查询项目列表
    getProjectList() {
      api.getProjectList().then((res) => {
        if (res.status === "success") {
          this.projectList = res.data.rows;
        } else {
          this.$message({
            type: "error",
            message: res.message,
          });
        }
      });
    },
    selectDownload(data) {
      let download = [];
      data.forEach((element) => {
        download.push(element.taskName);
      });
      console.log(download);
      this.downloadList = download;
    },

    downloadDocument() {
      // let fileName
      // let downloadElement
      // let href
      // this.downloadList.forEach((e) => {
      //   ((e)=>{
      //     setTimeout(()=>{
      //       fileName = e
      //       downloadElement = document.createElement("a")
      //       href = this.url+'/work/countGroupByProjectAndUserId/downloadExcel?taskName='+e
      //       downloadElement.href = href
      //       downloadElement.download = fileName;
      //       document.body.appendChild(downloadElement)
      //       downloadElement.click()
      //       document.body.removeChild(downloadElement)
      //       window.URL.revokeObjectURL(href)
      //       console.log(href)
      //     },5000);
      //   })(e);
      // })
      if (this.searchWord.trim() == "") {
        this.$confirm("确定导出所有项目统计数据吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            downloadExcel(this.url+"/work/countGroupByProjectAndUserId/downloadExcel?queryStartTime="+this.startDate+"&queryEndTime="+this.endDate);
          })
          .catch(() => {});
      }else{
        downloadExcel(this.url+"/work/countGroupByProjectAndUserId/downloadExcel?taskName="+this.searchWord+"&queryStartTime="+this.startDate+"&queryEndTime="+this.endDate);
      }
      
      // this.downloadList.forEach((e) => {
      //   const url =
      //     this.url +
      //     "/work/countGroupByProjectAndUserId/downloadExcel?taskName=" +
      //     e;
      //   downloadExcel(url);
      // });
    },
    download(data) {
      // const fileName = data.taskName
      // let downloadElement = document.createElement("a")
      // let href = this.url+'/work/countGroupByProjectAndUserId/downloadExcel?taskName='+data.taskName
      // downloadElement.href = href
      // downloadElement.download = fileName;
      // document.body.appendChild(downloadElement)
      // downloadElement.click()
      // document.body.removeChild(downloadElement)
      // window.URL.revokeObjectURL(href)
      console.log(data)
      const url =
        this.url +
        "/work/countGroupByProjectAndUserId/downloadExcel?taskName=" +
        data.taskName +
        "&queryStartTime="+this.startDate+"&queryEndTime="+this.endDate
      downloadExcel(url);
    },
    showSta(data) {
      this.taskId = data;
      this.getlistPageByCondition();
      this.showDetail = true;
    },
    getlistPageByCondition(){
      api.listPageByCondition( {taskId: this.taskId, makeStatus: 1 ,queryStartTime: this.startDate,queryEndTime: this.endDate}).then((res) => {
        this.messageData=res.data.rows
      })
    },
    getstaByTask() {
      api.staByTask({ taskName: this.searchWord ,queryStartTime: this.startDate,queryEndTime: this.endDate,projectId:this.projectId}).then((res) => {
        console.log(res);
        this.tableData = res.data.rows;
      });
    },
  },
  watch:{
    'startDate':function(newVal,oldVal){
      if(newVal==null&oldVal!=''){
        this.getstaByTask()
      }
    },
    'endDate':function(newVal,oldVal){
      if(newVal==null&oldVal!=''){
        this.getstaByTask()
      }
    },
    'projectId':function(newVal,oldVal){
      if(newVal==null&oldVal!=''){
        this.getstaByTask()
      }
    }
  },
  mounted() {
    this.getstaByTask();
    this.getProjectList();
  },
};
</script>
<style scoped>
.staProject {
  padding-top: 20px;
}
.toolBar {
  display: flex;
}
.content {
  margin-top: 10px;
}
.diaBtn {
  display: flex;
  justify-content: center;
}
.pagination {
  margin-top: 10px;
  width: 100%;
  text-align: center;
}
</style>